<style>

    .mui-bar~.mui-content .mui-fullscreen {
        top: 44px;
        height: auto;
    }

    .mui-pull-top-tips {
        position: absolute;
        top: -20px;
        left: 50%;
        margin-left: -25px;
        width: 40px;
        height: 40px;
        border-radius: 100%;
    }

    .mui-bar~.mui-pull-top-tips {
        top: 24px;
    }

    .mui-pull-top-wrapper {
        width: 42px;
        height: 42px;
        display: block;
        text-align: center;
        background-color: #efeff4;
        border: 1px solid #ddd;
        border-radius: 25px;
        background-clip: padding-box;
        box-shadow: 0 4px 10px #bbb;
        overflow: hidden;
    }

    .mui-pull-top-tips.mui-transitioning {
        -webkit-transition-duration: 200ms;
        transition-duration: 200ms;
    }

    .mui-pull-top-tips .mui-pull-loading {
        -webkit-backface-visibility: hidden;
            -webkit-transition-duration: 400ms;
            transition-duration: 400ms;
        margin: 0;
    }

    .mui-pull-top-wrapper .mui-icon,
    .mui-pull-top-wrapper .mui-spinner {
        margin-top: 7px;
    }

    .mui-pull-top-wrapper .mui-icon.mui-reverse {
        -webkit-transform: rotate(180deg) translateZ(0);
    }

    .mui-pull-bottom-tips {
        text-align: center;
        background-color: #efeff4;
        font-size: 15px;
        line-height: 40px;
        color: rgb(100, 121, 143);
        padding-bottom: 50px;
    }

    .mui-pull-top-canvas {
        overflow: hidden;
        background-color: #fafafa;
        border-radius: 40px;
        box-shadow: 0 4px 10px #bbb;
        width: 40px;
        height: 40px;
        margin: 0 auto;
    }

    .mui-pull-top-canvas canvas {
        width: 40px;
    }

    .mui-slider-indicator.mui-segmented-control {
        background-color: #efeff4;
    }
</style>
<div class="mui-content">
    <div id="slider" class="mui-slider mui-fullscreen">
        <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <div class="mui-scroll">
                <a v-for="(item, index) in tabList" :class="'mui-control-item ' + (index != 0 ? '' : 'mui-active')" :href="'#list_'+index">
                    {{item.name}}
                </a>
            </div>
        </div>
        <div class="mui-slider-group">
            <div v-for="(item, index) in tabList" :id="'list_'+index" :class="'mui-slider-item mui-control-content ' + (index != 0 ? '' : 'mui-active')">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <ul class="mui-table-view">

                            <li v-for="(itm, ind) in item.dataList" class="mui-table-view-cell" @tap="pageGo(itm.id)">

                                <!-- 第{{index+1}}个选项卡子项-{{ind}} -->
                                {{itm.name}} - {{itm.city}}.{{itm.state}} - {{itm.hospital}}

                            </li>

                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<script src="__STATIC__/module/mobile/js/mui.pullToRefresh.js"></script>
<script src="__STATIC__/module/mobile/js/mui.pullToRefresh.material.js"></script>
<script>
    showTitle("{:lang('医师列表')}");

    var vList = new Vue({
        el:'#slider',
        data:{
            listBak: [],
            tabList:[
                {
                    isDL: 0,
                    name: "{:lang('推荐')}",
                    dataList: [],
                    currentPage: 1,
                    pageSize: 0,
                    noMore: false,
                },
                {
                    isDL: 2,
                    name: "{:lang('美国医生')}",
                    dataList: [],
                    currentPage: 1,
                    pageSize: 0,
                    noMore: false,
                },
                {
                    isDL: 1,
                    name: "{:lang('中国医生')}",
                    dataList: [],
                    currentPage: 1,
                    pageSize: 0,
                    noMore: false,
                },

            ]
        },
        mounted:function (){
            this.getList(0);
        },
        methods:{
            dataReset: function () {
                p(this.listBak);
                if (this.listBak.length !== 0) {
                    p('000');
                    this.tabList = this.listBak;
                }
                p(this.listBak);
            },
            pageGo:function (id){
                go('./doctorMain/id/' + id + '.html');
            },
            getList: function (tabList_index, pullEle , callb) {
                if (this.listBak.length === 0) { //备个份
                    this.listBak = this.tabList;
                }
                var one = this.tabList[tabList_index];
                mui.get("{:url('mobile/index/doctorList')}", {
                        'isDL': one.isDL,
                        'page': one.currentPage++,
                    },
                    function (res) {
                        /* 
                        doctor = { //某医生所有字段
                            city:"Englewood",
                            head_pic_id:0,
                            hospital:"Englewood Hospital and Medical Center",
                            id:6205,
                            name:"Dr. Fred A. Wolodiger",
                            phone:"201-614-1814",
                            photo:"6205.jpg",
                            postcode:"07631",
                            specialty:"Vascular Surgery",
                            state : 'MA',
                        }; 
                        */
                        one.dataList = one.dataList.concat(res.data);
                        if( !one.pageSize ){
                            one.pageSize = res.data.length;
                        }

                        if( res.data.length < one.pageSize ){
                            one.noMore = true;
                        }

                        if( typeof pullEle == 'object' && typeof pullEle.endPullUpToRefresh == 'function' ){
                            pullEle.endPullUpToRefresh(one.noMore);
                        }

                        if( typeof callb == 'function' ){
                            callb();
                        }
                    },
                );
            },

        },
    });
    mui.init({
        swipeBack: false,//左滑后退
    });

    (function ($) {
        
        var deceleration = mui.os.ios ? 0.003 : 0.0009; // 阻尼系数
        $('.mui-scroll-wrapper').scroll({
            bounce: false,
            indicators: true, //是否显示滚动条
            deceleration: deceleration
        });
        $.ready(function () {
            //循环初始化所有下拉刷新，上拉加载。
            $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function (index, pullRefreshEl) {

                $(pullRefreshEl).pullToRefresh({
                    /* down: { // 不生效 暂时不上线

                        contentinit: "{:lang('下拉可以刷新')}",
                        contentdown: "{:lang('下拉刷新')}",
                        contentover: "{:lang('释放立即刷新')}",
                        contentrefresh: "{:lang('正在刷新')}" + '...',
                        callback: function () {
                            var self = this;
                            setTimeout(function () {
                                vList.dataReset();
                                vList.getList(index,self);
                            }, 800);
                        }
                    }, */
                    up: {
                        contentinit: "{:lang('上拉显示更多')}",
                        contentup: "{:lang('上拉更多')}",
                        contentrefresh: "{:lang('正在加载')}" + '...',
                        contentnomore: "{:lang('暂无更多')}",
                        callback: function () {
                            var self = this;
                            setTimeout(function () {
                                vList.getList(index,self);
                            }, 800);
                        }
                    }
                });
            });
        });
    })(mui);

</script>

<pre>


    
</pre>